<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="wd-form-wrapper">
				<u-form-item label="教室名称" prop="name">
					<u-input type="text" placeholder="请输入" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.name"></u-input>
				</u-form-item>
				<u-form-item label="人数（人）" prop="people">
					<u-input type="text" placeholder="请输入" placeholder-style="{color: '#999999'}" :clearable="false" :disabled="!formStatus" v-model="formData.people_count"></u-input>
				</u-form-item>
				
			</view>
		</u-form>
		<view v-if="!formStatus" class="wd-form-footer">
			<view class="wd-form-footer__btn">
				<u-button :custom-style="{height: '90rpx',background: 'rgba(0,0,0,0)',fontSize: '32rpx',color: '#6D4BBE'}" shape="circle" :ripple="true" @click="formStatus=true">编辑</u-button>
			</view>
			<view class="wd-form-footer__btn">
				<u-button :custom-style="{height: '90rpx',background: 'rgba(0,0,0,0)',fontSize: '32rpx',color: '#666666'}" shape="circle" :ripple="true" @click="del_classroom">删除</u-button>
			</view>
		</view>
		<view v-else class="wd-form-footer">
			<view class="wd-form-footer__btn">
				<u-button :custom-style="{height: '90rpx',background: 'linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%)',fontSize: '32rpx',color: '#FFFFFF'}" shape="circle" :ripple="true" @click="submit">保存</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classroom_id:0,
				formStatus: false,
				formData: {
					name: '',
					people_count: '',
				},
				rules: {
					name: [{ required: true, trigger: 'change', message: '请输入教室名称' }],
					//people: [{ required: true, trigger: 'change', message: '请输入人数' }],
					type: [{ required: true, trigger: ['change','blur'], message: '请选择适用课程类型' }],
				},
			}
		},
		
		onLoad(options){
			if(options.classroom_id && options.classroom_id>0){
				this.classroom_id = options.classroom_id || 0;
				this.fetchClassroomDetail();
			}else{
				this.formStatus = true;
			}
		},
		
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//获取教室详情
			fetchClassroomDetail(){
				var classroom_id = this.classroom_id;
				this.$core.get({url:'fitness.manage/classroom_detail',data:{classroom_id:classroom_id},success:(ret)=>{
				    this.formData = ret.data;
					
				}});
			},
			del_classroom(){
				var that = this;
				var classroom_id = that.classroom_id;
				
				this.$core.post({url:'fitness.manage/del_classroom',data:{classroom_id:classroom_id},success:(ret)=>{
				    uni.showToast({
				    	title: ret.msg,
				    	icon: 'none',
				    	success() {
				    		uni.navigateBack({})
				    	}
				    })
				}});
			},
			submit() {
				var that = this;
				let shop = this.$core.getCurrentShop();
				that.$refs.uForm.validate(valid => {
					if (valid) {
						var formData = that.formData;
						formData['classroom_id'] = that.classroom_id;
						formData['shop_id'] = shop.id;
						that.$core.post({url:'fitness.manage/set_classroom',data:formData,success:(ret)=>{
							that.getOpenerEventChannel().emit("setSuccess",{})
							uni.navigateBack({})
							uni.showToast({title: ret.msg,icon: 'none',})
						}});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.popup-wrapper {
		&__title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
		}
		&__body {
			display: flex;
			flex-wrap: wrap;
			max-height: 60vh;
			padding: 24rpx;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			/deep/ .u-checkbox {
				padding: 8rpx 0;
			}
			/deep/ .u-checkbox__label {
				flex: 1;
				margin-left: 24rpx;
			}
		}
	}
</style>